<template>
  <div class="main">
    <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
      <a-tabs
        :activeKey="customActiveKey"
        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
        @change="handleTabClick">
        <a-tab-pane key="tab1" tab="初始化系统">
          <a-form-item>
            <a-input
              size="large"
              v-decorator="['username',validatorRules.username]"
              type="text"
              placeholder="请输入帐户名">
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-input
              v-decorator="['password',validatorRules.password]"
              size="large"
              type="password"
              autocomplete="false"
              placeholder="密码">
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>


        </a-tab-pane>
      </a-tabs>


      <a-form-item style="margin-top:24px">
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="loginBtn"
          @click.stop.prevent="handleSubmit"
          :disabled="loginBtn">确定
        </a-button>
      </a-form-item>

    </a-form>


  </div>
</template>

<script>

  import { init } from "../../api/user";
  import { timeFix } from "../../utils/util";
  import { getDyRouterTable } from '../../config/router-async-table'

  export default {
    data () {
      return {
        customActiveKey: "tab1",
        loginBtn: false,
        form: this.$form.createForm(this),
        formLogin: {
          username: "",
          password: "",
        },
        validatorRules:{
          username:{rules: [{ required: true, message: '请输入用户名!',validator: 'click'}]},
          password:{rules: [{ required: true, message: '请输入密码!',validator: 'click'}]}
        },
      }
    },
    created () {
      this.$store.commit("SET_TOKEN", '');
      this.getRouterData()
    },
    methods: {
      // handler

      handleTabClick(key) {
        this.customActiveKey = key
        // this.form.resetFields()
      },
      handleSubmit() {
        let that = this
        let param = {};
        that.loginBtn = true;
        if (that.customActiveKey === 'tab1') {
          that.form.validateFields(['username', 'password'], { force: true }, (err, values) => {
            if (!err) {
              param.username = values.username;
              param.password = values.password;
              getDyRouterTable()
                .then(res=>{
                  param.routeMap = res;
                  init(param).then(res=>{
                    if(res.success){
                      console.log('初始化系统完成', res);
                      that.initSuccess();
                    }

                  }).catch(err =>{
                    that.requestFailed(err);
                  });
                })

            } else {
              that.loginBtn = false;
            }
          })
          // 使用手机号登陆
        }
      },

      initSuccess() {
        this.loginBtn = false
        this.$router.push({ path:"/user/login" })
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，初始化成功,请登录`,
        });
      },
      requestFailed(err) {
        this.$notification['error']({
          message: '登录失败',
          description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
          duration: 4,
        });
        this.loginBtn = false;
      },
      getRouterData() {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            'username': this.$route.params.username
          });
        })
      },
    }
  }
</script>

<style lang="scss" scoped>

  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0,0,0,.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color .3s;

        &:hover {
          color: #1890ff;
        }
      }

      .register {
        float: right;
      }
    }
  }

</style>
<style>
  .valid-error .ant-select-selection__placeholder{
    color: #f5222d;
  }
</style>